The standard Digital Accessibility practices for online websites and content still apply to web applications; e.g., images should have alternate text, color contrast should meet the proper ratio, etc. Visit our in-depth guides on general digital accessibility<\/a>. When developing (or adopting) any kind of online tool, program, or software, there may be additional practices to keep in mind due to the versatile array of features an application may have compared to a static webpage.<\/p>\n With all digital accessibility, it\u2019s important to make sure a tool or application is both:<\/p>\n Tools and applications can become much more complex than a simple website and require many different menus, buttons, and screens. It\u2019s vital for a user to be able to navigate their application quickly and intuitively, regardless of what assistive technology they may be using. Two ways that can help achieve that goal are with proper HTML Elements and ARIA Labels.<\/p>\n Always use the proper HTML attributes where applicable as these are often built to be accessible. For example, when you have a button, use a Assigning the appropriate ARIA (Accessible Rich Internet Applications) roles and labels to HTML elements are crucial for your application to be accessible for keyboard and screen reader users.<\/p>\n Common features that require these additional accessibility tags:<\/p>\n Tooltips – the text that appears when you hover over an object on the screen \u2013 aren\u2019t natively accessible via keyboard alone or screen reader. Also keep in mind that users on a phone will not be able (this sentance needs to be finished)<\/p>\n A popup or modal is described by a floating element that appears overtop other parts of the application and has any kind of user interactivity. A tooltip is not a popup because there is no way for a user to interact directly with the tooltip versus, say, a text box that appears and requires the user to click an \u201cX\u201d to close it.<\/p>\n Â鶹ӳ»´«Ã½ staff may obtain access to SiteImprove, a comprehensive tool that enhances website and web application quality by scanning for issues related to accessibility, content quality, and search engine optimization (SEO). It provides valuable insights that help improve user experience, ensure compliance with accessibility standards, and optimize content for better search engine rankings. Access can be requested by completing the SiteImprove Access Form<\/a>.<\/p>\n\n
HTML Elements<\/h2>\n
<button><\/code> instead of just making a <div><\/code> wrapped in an <a><\/code> tag.<\/p>\nARIA Labels<\/h2>\n
\n
aria-label<\/code>: Used where there is no visual text with which to give an \u201caccessible name\u201d to an element for a non-visual user. Should be short and concise. (Example: writing aria-label=\u201dClose\u201d<\/code> to represent the red \u201cX\u201d to close a dialogue box)<\/li>\naria-labelledby<\/code>: Used similarly to aria-label<\/code>, but in cases where another element on the screen is (Example: having a checkbox element below a string of text that says \u201cI Accept the Terms and Conditions.\u201d The visual context is easy to understand for a visual user. Putting aria-labelledby=\u201did\u201d<\/code> onto the checkbox element with the id<\/code> of the text element makes this context much clearer to someone using a screen reader)<\/li>\naria-description<\/code>: Similar to aria-label<\/code> but used for more complex elements needing longer descriptions. (Example: using aria-description=\u201dCalendar for current appointment availability\u201d<\/code> for an application that allows users to schedule their doctor appointment via online calendar)<\/li>\naria-describedby<\/code>: Similar to aria-describedby<\/code>.<\/li>\n<\/ul>\n\n
Tooltips<\/h3>\n
\n
role=\"tooltip\u201d<\/code>. This makes sure that the tooltip properly activates both mouse and keyboard focus.<\/li>\naria-describedby<\/code> that contains the id of the tooltip element. This tells the screen reader that there\u2019s a tooltip attached to this element, as tooltips otherwise cannot receive keyboard focus or be tabbed to.<\/li>\n<\/ul>\nPopups\/Modals<\/h3>\n
\n
aria-haspopup<\/code>. It can be set to one of seven values to specify the type of popup:\n\n
menu<\/code>: indicates that the popup is a menu with a selection of items to be chosen<\/li>\ntree<\/code>: indicates that the popup is a list of nested elements with some kind of hierarchy format<\/li>\nlistbox<\/code>: indicates that the popup is a list of static items to be selected by the user (such as a dropdown)<\/li>\ngrid<\/code>: indicates that the popup contains a grid of multiple cells with rows and columns, each of which are keyboard-focusable , such as in a tabular format<\/li>\ndialogue<\/code>: indicates that the popup is a dialogue box that is (usually) separate from the rest of the application and must be interacted with in some way before returning to the app<\/li>\ntrue<\/code>: defaults to menu<\/li>\nfalse<\/code>: indicates there is no popup attached to this element<\/li>\n<\/ul>\n<\/li>\naria-haspopup<\/code> attribute.<\/li>\n<\/ul>\nBest Practices<\/h2>\n
\n
Helpful Reminders While Building or Testing an Application<\/h2>\n
\n
Scan your Website or Web Application with SiteImprove<\/h2>\n
Resources<\/h2>\n
\n