Web A11y: 11 Best Practices and Techniques for Developing Accessible Web-Applications

Web A11y — Stepping Towards an Inclusive Digital World for All

Cover Picture: 11 Best Practices and Techniques for Developing Accessible Web-Applications

Web Accessibility is an essential aspect throughout the software development lifecycle including product planning, use-case and requirements discussions, user interface designing, development and testing. This post shares 11 best practices and techniques to develop a product that provides an inclusive experience for all customers.

11 Best Practices and Techniques for Developing Accessible Web-Applications:

1. Semantic HTML Markup:

• Semantic HTML refers to using the accurate HTML markup elements for the intended meaning and purpose. It helps screen readers to interpret the content structure accurately in the correct meaningful order.
• The semantic element tags in a web-page can include Semantic Title, Headings, Landmarks, Lists, Tables etc. For instance, the heading levels should be used in a correct meaningful sequence (where <h1> is for the level-1 main heading while <h6> is the smallest heading level).
• Using appropriate heading tags is also good for Search Engine Optimization (SEO) as it helps to improve the ranking of the web-page in search engines.

2. Text Alternative For Images:

• Alternate text content should be provided for conveying the information in any non-text content like images.
• The alt attribute in img tag should be used for providing an equivalent alternative text description for images. An empty alternate text alt="" can be used when an image is added just for decoration purpose such that screen readers can ignore that image.
• Alternate text conveys intended content of the image when the image does not load or assistive technologies, like screen readers, are used.
• Scalable Vector Graphic (SVG) images require additional semantic information. Provide aria-label and role="img" for embedded SVG file. This describes it as a single image entity and enables assistive technologies, like screen readers, to avoid reading out all the child elements inside the SVG.

3. Captions and Transcripts:

• The corresponding alternative like captions and transcripts should be provided for multimedia content like video / audio (pre-recorded or live).
• Assistive technologies interpret the information through alternative text like captions etc. as they cannot directly interpret the information in multimedia content like video and audio.

4. ARIA — Accessible Rich Internet Applications:

• Using the appropriate native HTML markup elements must be preferred as they have built-in semantics and keyboard support.
• However, while adding custom widgets, advanced user interface components and working with dynamic interactions using JavaScript, there may not be suitable native HTML elements available with required semantics. In such scenarios, the additional attributes provided by WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) can be used to add semantics and enhance the accessibility.
• ARIA can be used to specify semantic information like Roles, States, and Properties. ARIA-Roles contain semantic information about the type of element. ARIA-States are properties which can dynamically change based on user events. ARIA-Properties are attributes which convey essential information about the nature of an element or data values.
• Example of ARIA Roles: If a custom container is created to show a list of items instead of the native <ul> or <ol> list type elements, then the aria-roles list and listitem can be used to add the appropriate semantics as follows:

<section role="list">
    <div role="listitem"> List Item 1 </div>
    <div role="listitem"> List Item 2 </div>
</section>

• Aria States and Properties are generally used in conjunction with aria-roles. Commonly used aria-states include aria-selected, aria-checked, aria-expanded etc. Commonly used aria-properties include aria-label, aria-labelledby, aria-describedby etc.

5. Form Labels:

• Proper labels should be provided for the corresponding form input fields such that the screen readers can read aloud the label for each input field.
• The HTML label tag can be used for adding labels and the for attribute is used to mention the id of the associated form field.
  Example:

<label for="userName"> Name: </label>
    <input type="text" id="userName">

• Implicit labels can also be used to directly nest the form field inside the label tag as follows:

<label> Name: <input type="text" id="userName"> </label>

• ARIA properties such as aria-label or aria-labelledby can be used in the form input field when a separate label for a field may not be visually required. ARIA adds semantic information to the element such that screen readers can identify the purpose of the form field.

6. Keyboard Accessibility — Focus and Tab Order, Keyboard Shortcuts, Navigation Controls, Interactive Actions:

• All functionality should be completely accessible using only the keyboard also (including all form fields, interactive elements, links and navigation controls).
• All interactive components should be focusable in a logical tab sequence. The default tab order is determined by the order of elements in the DOM.
• The tab order can be modified by using the tabindex attribute, but this should be avoided. Positive tab index values should generally be avoided as they can cause unpredictable tab flow value.
• Keyboard shortcuts can be provided for common functionalities to offer enhanced efficiency and productivity to keyboard power-users.

7. Text Size and Language of Content:

• The font-size of the content should be legible and should be adaptable to resize for different screen-sizes.
• The language of the content should be lucid such that everyone can clearly understand the content.

8. Internationalization and Localization:

• As users may access web-applications from several locations with diverse native languages, it is recommended that the content should adapt accordingly.
• Declare the default language of web-page by adding the “lang” attribute in the html tag.
• In JavaScript, the Intl object, which is namespace for ECMAScript Internationalization API, can be used for internationalization. The react-intl package, part of the FormatJS set of libraries, can be used to internationalize the web-applications developed in React. It can be used to automatically translate string, format date / time and format numbers according to the detected locale value.

9. Responsiveness:

• The user interface should be developed in a responsive manner such that it is adaptable to different devices and screen-sizes.
• Responsive styling of user interface can be done by adding media-queries and using responsive Flexbox layout.

10. Web Performance:

• It is critical to analyze and optimize the web-performance also along with developing an accessible user interface.
• The web-application content should load in reasonable time for all customers including those accessing it on a slow internet connection.
• There are a variety of techniques for optimizing web-performance which includes code-splitting, lazy-loading code, caching required resources, removing unnecessary resources, left-shifting the network waterfall through static assets optimization etc.

11. Color Contrast:

• Suitable colors with appropriate contrast ratio should be used such that all elements in the user interface are perceivable to every customer.
• For instance, there should be a sufficient color contrast between the foreground and background such that they are easily distinguishable.
• The Color Contrast Accessibility Validator tool can be used to verify if the contrast ratio is sufficient for any two chosen colors.

References and Resources:

• Web Content Accessibility Guidelines (WCAG) 2.1
• Teach Access Tutorial on Accessibility
• Deque Blog on Alt Text
• MDN Web Docs on Semantic HTML
• MDN Web Docs on WAI-ARIA
• W3C — Web Accessibility Initiative (W3C-WAI)
• Accessible Rich Internet Applications (WAI-ARIA) 1.1
• Accessible Rich Internet Applications (WAI-ARIA) 1.2

Thank you for reading this blog. Stay tuned to read more blogs soon.

You can also click the links below to read my previous blogs on web-accessibility.

WCAG’s 4 Principles and 13 Guidelines for Web Accessibility:

Web A11y: WCAG’s 4 Principles and 13 Guidelines For Web Accessibility

What is Web Accessibility and Why Digital Inclusion Matters:

Web A11y: What is Web Accessibility and Why Digital Inclusion Matters