If you use uppercase letters for entire words, phrases or sentences, some users will find it difficult to read.Ĭompare the shapes – especially note the ascenders (the tops of letters such as d, t, and l) and descenders (the bottoms of letters such as g, p and q) – of this word in the following two styles: People rely, to one degree or another, on the shape of words, to be able to read text quickly.
Note: bold and italicised styles, even when deployed using semantic HTML elements, and, are not communicated by screen readers, so this information will only be conveyed to users who can see the text. Do not use bold or italics for whole paragraphs.Use these styles solely to highlight key words and key phrases – do not attempt to convey any further meaning or information using these styles.Doing so makes it hard to read, especially for users with reading difficulties such as dyslexia. Techniques Left-align your textĭo not right-align, centre or justify your text.
Digital content must be presented in a way that allows users to rapidly absorb and understand the information you are communicating. Users read and interact with digital content in a very different way to printed material. When the “trigger” button is pressed, the script runs the openDialog() function:Ĭlose.Make it as easy as possible for users to get an impression of the nature of your content and find specific sections quickly. This style is paired with the hover style so that keyboard and mouse operation look consistent. When the custom attribute open is added to the dialog with JavaScript, the dialog is revealed.ĭistinctive focus styles are added for the dialog’s the opening and closing buttons so that it’s clear to keyboard users which element is focused. The close button has an aria-label attribute that overrides the element’s text character of “times” to read “close” when screen readers interact with it.Īs well as some CSS for color and positioning, the dialog is set to display:none by default. So when focus is moved to the dialog or inside it, the text within those two elements will be read in succession. The aria-labelledby and aria-describedby attributes are “relationship” attributes that connect the dialog to its title and description explicitly. Note the dialog role, which tells assistive technologies that the element is a dialog. The dialog itself must be constructed from a combination of HTML and WAI-ARIA attributes, as in this example: In this modal dialog example, we’ll look at the HTML, CSS and JavaScript separately. HTML and WAI-ARIA can be used to provide the necessary semantic information, CSS the appearance and Javascript the behavior. Modal dialogs can enhance usability by focusing attention on a specific message that requires a user action to continue.Īn accessible modal dialog is one where keyboard focus is managed properly, and the correct information is exposed to screen readers.