I’m currently working as a working student at SAP and have been working on an accessibility improvement project with SAP Community teams. In this post, I want to share my experience of improving web accessibility on SAP Community pages, especially for the case when a screen reader and keyboard is used to navigate through the page.
Web accessibility puts emphasis on making web content more ‘accessible’, that is, the web content is equally available for all users. Web accessibility is, therefore, essential in order to not exclude people from not being able to access the web content and hence, must be considered in development process as well.
When you confront a web accessibility project, the first thing to do is to evaluate the current situation in regard to the web accessibility standards and identify the elements that need to be improved. While evaluating, it’s recommended to refer to the Web Content Accessibility Guidelines (WCAG), which is an international accessibility standard published by W3C (Visit this page for detailed information about WCAG). To test accessibility, I recommend to only use the keyboard to go through the page with a screen reader turned on. (For example, NVDA or JAWS) Knowing some keyboard shortcuts for the screen reader is also advisable.
Keyboard navigation is one of the most important features in accessibility. People with motor disability or visually impaired people usually use keyboard to navigate on web page.
One important aspect is the keyboard navigation order. Make sure that the user can navigate through page with keyboard in coherent order, such as, from top to bottom and left to right. Also, avoid using “tabindex” value greater than 0, since this can mess up the tab order and confuse the users, when new elements are added to the page.
Further, to fully utilize the functionalities embedded in the page, it must be assured that the interactive elements must be accessed not only with a mouse but also with a keyboard. Especially, do not use an anchor tag without assigning “href” attribute, since it is not recognized as a link but as a “clickable” element and cannot receive a keyboard focus.
Always write a heading in each content group to make it clear to the users what the content is about.
Also, make sure the heading hierarchy is correct: It should correspond to the importance of the content. It gives better orientation of the page to the users. For example, SAP Community pages preserve only one Level 1 heading (<h1> tag) for each page, showing the title of the page.
There are approximately 3 million color-blind people and 285 million visually impaired people in the entire world.
Though using colors is an effective way of giving information, (for example, showing the part in red, where changes are required) it should only be used as an additional support for the main functionality.
WAI-ARIA is a framework to add additional attributes to the web content to identify their detailed role, properties and state. With the use of WAI-ARIA, make sure that every element in the page is sufficiently described so that the users can fully utilize the functionalities in the page.
For interactive elements in the web page, it is important to provide the users some feedback of the action, for example, submitting a form or an input element.
Make sure that a success or an error message is shown depending on the result of the action. In case of error, do not forget to assist the users with some information, describing how to correct the error.
Accessibility can also be improved from your side as a community user, for example when posting blog entries or questions.
Use the headings that clearly describes what your content is about and use the proper heading levels (heading 2 to heading 6): It should correspond to the importance of the content; heading 2 for the main heading and heading 6 for the smallest subheadings. This gives the users clearer demonstration of the text structure. (Avoid using heading 1, since this might already exist in the web page)
Make sure to put a caption for tables, that briefly but sufficiently describes the content of the table. Tables are commonly used to group information in rows and columns and hence to reduce complexity to deliver information to the users. However, it might not be clear what a table is trying to show. Also, if a user has to use a screen reader to read the table, clear description is essential for efficient delivery of information.
Make sure to provide an alternative text for images, that sufficiently describes the image to make them accessible. It is especially important for users who use screen reader. This can be done by assigning alt = “Description_of_the_image” attribute to the images (or in the additional text field when uploading images on Blogs. See Figure 1). This text is then read by the screen reader as a description of the image.
Use meaningful text for links, that give sufficient information to the users what the links are about. Users who use screen reader often tabs from link to link. In this case, if the link-texts are just “Click here” or “More”, it doesn’t give any information to the users what this link is about. (For example, see how the link-texts are formed in this post)
So far, we’ve learned how we can improve web accessibility with some examples. I hope this post helped you understand the importance of web accessibility and how we could improve it.
And of course, there are more ways to improve web accessibility that are not mentioned in this post and there might be some new standards because of new technologies and the updated WACG. So, please stay up to date and if you have any comments regarding this post, feel free to share them in the comment section below!
Web accessibility puts emphasis on making web content more ‘accessible’, that is, the web content is equally available for all users. Web accessibility is, therefore, essential in order to not exclude people from not being able to access the web content and hence, must be considered in development process as well.
When you confront a web accessibility project, the first thing to do is to evaluate the current situation in regard to the web accessibility standards and identify the elements that need to be improved. While evaluating, it’s recommended to refer to the Web Content Accessibility Guidelines (WCAG), which is an international accessibility standard published by W3C (Visit this page for detailed information about WCAG). To test accessibility, I recommend to only use the keyboard to go through the page with a screen reader turned on. (For example, NVDA or JAWS) Knowing some keyboard shortcuts for the screen reader is also advisable.
Best Practices for Web Accessibility
1. Allow keyboard navigation
Keyboard navigation is one of the most important features in accessibility. People with motor disability or visually impaired people usually use keyboard to navigate on web page.
One important aspect is the keyboard navigation order. Make sure that the user can navigate through page with keyboard in coherent order, such as, from top to bottom and left to right. Also, avoid using “tabindex” value greater than 0, since this can mess up the tab order and confuse the users, when new elements are added to the page.
Further, to fully utilize the functionalities embedded in the page, it must be assured that the interactive elements must be accessed not only with a mouse but also with a keyboard. Especially, do not use an anchor tag without assigning “href” attribute, since it is not recognized as a link but as a “clickable” element and cannot receive a keyboard focus.
2. Write a proper heading
Always write a heading in each content group to make it clear to the users what the content is about.
Also, make sure the heading hierarchy is correct: It should correspond to the importance of the content. It gives better orientation of the page to the users. For example, SAP Community pages preserve only one Level 1 heading (<h1> tag) for each page, showing the title of the page.
3. Don’t rely only on color
There are approximately 3 million color-blind people and 285 million visually impaired people in the entire world.
Though using colors is an effective way of giving information, (for example, showing the part in red, where changes are required) it should only be used as an additional support for the main functionality.
4. Take advantage of WAI-ARIA (See the follow up post for more detail)
WAI-ARIA is a framework to add additional attributes to the web content to identify their detailed role, properties and state. With the use of WAI-ARIA, make sure that every element in the page is sufficiently described so that the users can fully utilize the functionalities in the page.
5. Provide direct system response for user interactive element
For interactive elements in the web page, it is important to provide the users some feedback of the action, for example, submitting a form or an input element.
Make sure that a success or an error message is shown depending on the result of the action. In case of error, do not forget to assist the users with some information, describing how to correct the error.
How can you contribute
Accessibility can also be improved from your side as a community user, for example when posting blog entries or questions.
1. Use proper headings
Use the headings that clearly describes what your content is about and use the proper heading levels (heading 2 to heading 6): It should correspond to the importance of the content; heading 2 for the main heading and heading 6 for the smallest subheadings. This gives the users clearer demonstration of the text structure. (Avoid using heading 1, since this might already exist in the web page)
2. Use captions for tables
Make sure to put a caption for tables, that briefly but sufficiently describes the content of the table. Tables are commonly used to group information in rows and columns and hence to reduce complexity to deliver information to the users. However, it might not be clear what a table is trying to show. Also, if a user has to use a screen reader to read the table, clear description is essential for efficient delivery of information.
3. Use alternative text for images
Make sure to provide an alternative text for images, that sufficiently describes the image to make them accessible. It is especially important for users who use screen reader. This can be done by assigning alt = “Description_of_the_image” attribute to the images (or in the additional text field when uploading images on Blogs. See Figure 1). This text is then read by the screen reader as a description of the image.
Figure 1 Insert Image Dialog
4. Use meaningful text for links
Use meaningful text for links, that give sufficient information to the users what the links are about. Users who use screen reader often tabs from link to link. In this case, if the link-texts are just “Click here” or “More”, it doesn’t give any information to the users what this link is about. (For example, see how the link-texts are formed in this post)
So far, we’ve learned how we can improve web accessibility with some examples. I hope this post helped you understand the importance of web accessibility and how we could improve it.
And of course, there are more ways to improve web accessibility that are not mentioned in this post and there might be some new standards because of new technologies and the updated WACG. So, please stay up to date and if you have any comments regarding this post, feel free to share them in the comment section below!
- SAP Managed Tags:
3 Comments
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
