Rule 1: Perceptibility
Website is a kind of document containing paragraphs of text and graphics that allow you to illustrate the content described. Such graphics should be accompanied by the so-called alternative text describing what is on the image, especially when it is an icon for a key action like navigation or account deletion. The description of the content should also apply to video and audio materials. Ultimately, the page should contain a description and transcripts of all content and components.
First of all, the available pages should present contrasting text. However, the contrast can’t result from the use of a glaring (unpleasant for longer viewing) color palette. It should be achieved by presenting black and white color variants, e.g. white text on a black background. Texts shouldn’t be inserted in the form of graphics to ensure that the contrast can be forced to increase. The colors used for actions on the website have to correspond with the natural human perception; for critical actions (delete, cancel) clear red and orange palettes, and for the continuation actions (continue, accept) green palettes, blue colors. However, it is worth emphasizing that the distinction of an action shouldn’t be based solely on color.
The third pillar of the website’s visibility is layout, i.e. the method of determining the size and location of elements. For texts, we should maintain the natural document order with a sufficiently large header and relatively smaller paragraphs, using, e.g. the system of six levels of HTML headings. It will allow all users to understand the content better. Initially, all texts should be of a size that allows you to conveniently consume the page on larger and smaller devices, but at the same time, for example, a 200% magnification shouldn’t lead to a serious distortion of the page’s appearance. The new HTML5 standard suggests to divide the page into 3 columns. The most important and at the same time the largest middle section contains the main content. Two smaller columns on the sides of the page can have navigation and additional elements. Such a composition allows you to dynamically hide columns to always properly present the data to the user. Regardless of the selected layout, the entire page must be scalable, i.e. smoothly resize to adapt to the largest and smallest devices.
Rule 2: Functionality
The element that can facilitate the use of websites, not only for people with disabilities, is the understandable marking of form fields and actions. Hints should be placed directly next to or on the change field and prompt the correct values in an obvious way. Comprehensive order and form of notation should also include links, although it’s not always easy for security reasons. In that case however, you shouldn’t break the encryption rules and the links shouldn’t be forcibly shortened – they ought to be presented in a visible and clear way.
Not everyone has the ability to use the cursor with the mouse, and it should be considered while designing a website. Navigation, text or multimedia elements should be accessible from the keyboard level as well. It is best if the switching takes place between groups of elements and limits the amount of necessary interactions from the user level. Within a group, logical navigation should be performed by means of arrows. It’s also helpful to add skip-over-navigation (“Skip to content”) or links to frequently-visited places.
More and more pages are equipped with advanced transition animations, transparency and layout changes. Such visual enhancements are aesthetically pleasing and make it easier for average users to understand the content. However, for people with visual difficulties or motor problems, they are a common nuisance. You should add an option to turn off all animations on the page and show all hidden elements. When designing the navigation system, first of all remember that they shouldn’t be aggressive and flashing. Otherwise, they may cause an adverse reaction to the user.
The functional palette of the page should primarily include: enlarging and reducing the text, changing the color and transcription of the page. It could also be displayed in a form without graphics (simplified version).
Rule 3: Intelligibility
Comprehensibility of the website can be achieved primarily through its visual and contextual consistency. Each page should differ primarily in the content of the article. The colors and the navigation scheme should remain unchanged for the user, so that one doesn’t feel like switching to a different platform. Maintaining consistency may simplify the use of ready-made component patterns, such as Material Design or Human Interface Guidelines, as well as the use of frameworks.
The presented text should be understandable and direct (no unnecessary words or complicated sentences). Even if the website is distinguished by a specialized business domain, it should still use popular phrases such as “go to”, “cancel” or “menu” in as many components as possible. Then, distinguishing the product during design should be achieved primarily through the colors and graphics, including icons. Speaking of icons, as pictograms, they are a conceptual alternative to texts, but they are not always a perfect solution. A poorly designed image, i.e. too complicated, indistinct or just not popular (not obvious) causes confusion.
Apart from the action texts, navigation or main content, websites often contain additional information used as hints or explanations. If they appear, they should be descriptive but relatively short. Such texts are useful for users while filling out forms when a form field cannot be recognized correctly for some reason or its format is difficult to define. A good indication is, for example, the help for the TIN field: “10-digit number assigned when setting up a business”. All abbreviations and acronyms should also be explained on the website.
Errors and exceptions caused by the user or random events are inevitable in the software. If the problem is incorrect data entered into the form, then you should direct the user as accurately as possible (visually and descriptively) to enter the correct value. There is often no simple and quick solution to any technical faults. Nonetheless, you should show relevant information describing the type of problem and contact the user support. People with varied disabilities need audio-visual forms of communication made visible: chat, video call, email, telephone, sign language.
Rule 4: Compatibility
The last rule focuses on creating good quality code as an essential aspect of accessible websites. The first point is the HTML markup code. Each tag has a specific role that may be of interest to a potential reader. The h1-h6 headings, paragraphs or links should be wrapped in the corresponding <h1>, <p>, <a> elements. It is not always possible to style such components properly, and we can then make the content easier to understand by adding <figure> and <figcaption>. Even when elements are mainly used for a decorative purpose, for example a separator, it is appropriate to style the <hr> tag rather than the <div> tag.
Handling errors in the code and presenting them to the user is always a big problem for programmers. On one hand, revealing too many details has a negative impact on the security of the code. On the other, the user is often left with laconic information that something has gone wrong. When a fault occurs during a one-step action, the first thing you should do is show separate messages for different problems. The users need to know that they don’t have internet access or it’s a server bug with which they can’t do anything. When a failure occurs during a complex registration process, an instruction is required as to whether the form can be resumed from a certain stage or whether it is necessary to start over. It is definitely better for a human experience of using a website to store each of the smaller steps in the process and be able to start from there. This approach, however, often involves a very high workload, which is why it is recommended only for critical processes.
When there is a need to show a message to the person operating the program, it is best to present it in the form of a modal window (graphically highlighted surface) or disappearing popups. The severity of the vulnerability should define how much interaction is required from the user when showing such a view.
The software is always made by people for people and I hope that in the future we will see more solutions (especially government sites) compliant with accessibility rules.
