KAMİS
AA Level Principles
Subtitles (Live)
Principle
Subtitles should be provided for live content.
Description
For live audio and video content broadcast on websites, subtitles should be provided. Subtitles are expected to be informative not only about the dialogues in the content but also about ambient sounds, effects, and other important details.
References
- WCAG 2.0 - Level AA / 1.2.4
Example
On the sample site, the subtitles of the content broadcast live will enable users with hearing difficulties to understand the content.
Audio Description (Pre-recorded)
Principle
Audio descriptions should be provided for video elements.
Description
Pre-recorded video elements on websites should include audio descriptions. This helps users with visual impairments to better understand video content. It is important that audio descriptions are synchronized with the content and provide information about visual changes in the video.
References
- WCAG 2.0 – Level AA / 1.2.5
Example
As seen on the example site, providing audio versions for video content is necessary for making video content understandable for users with visual impairments.
Contrast (Minimum)
Principle
Text and visual elements should have appropriate contrast ratios.
Description
Text and visual elements on websites should have a minimum contrast ratio of 4.5:1 between them and the background. Contrast ratios lower than this value can reduce readability and should be avoided. However, for large-scale text and images, a 3:1 contrast ratio is recommended. Contrast ratios are not necessary for institutional logos and images used for decorative purposes only.
References
- WCAG 2.0 – Level AA / 1.4.3
Example
As shown on the sample site, content is written with black text on a white background to ensure appropriate contrast ratios. Online contrast tests can be conducted between colors using tools such as http://snook.ca/technical/colour_contrast/colour.html.
Resizing the Text
Principle
Text elements should be resizable.
Description
Text elements on websites should be resizable up to 200% without losing functionality and without the need for assistive technologies. This allows individuals with varying degrees of visual impairments to read content without the need for assistive technologies.
References
- WCAG 2.0 – Level AA / 1.4.4
Example
As demonstrated on the sample site, text within the content should be resizable, allowing users with visual impairments to increase the text size for better readability.
Text Images
Principle
Using text within images should be avoided.
Description
Accessibility tools like screen readers are unable to read text within images and rely solely on alternative text to inform users. Additionally, users cannot resize this text. Therefore, it is essential to minimize the use of text within images whenever possible.
References
- WCAG 2.0 – Level AA / 1.4.5
Example
As shown on the sample site, all content is presented as text. To ensure screen readers can effectively convey the content of websites, information should be provided as text rather than being embedded within images (e.g., using images for titles), which may not be detected by screen readers.
Multiple Ways
Principle
Multiple methods should be provided for accessing website content.
Description
Users should be able to access website content and functionality using different methods. For this purpose, options such as search fields, navigation elements, or a site map should be made available to users. Considering users' preferences, providing links to the main page from all subpages and using the main page as a site map can also be useful.
References
- WCAG 2.0 – Level AA / 2.4.5
Example
As seen on the sample site, having a search feature and providing a site map offers two ways to access content. Providing multiple ways to access website content helps users find what they are looking for more efficiently.
Headings and Labels
Principle
Headings and labels should be clear, meaningful, and consistent.
Description
To enable users to easily access the information they are looking for and understand site content correctly, clear and meaningful headings should be provided. Data entry fields and navigation elements should also use descriptive and instructive labels, and labels should be formatted consistently with the content they are related to.
References
- WCAG 2.0 – Level AA / 2.4.6
Example
As seen on the sample site, headings are created to be related to the content. Content and headings used on the website should be related to each other.
Visible Focus
Principle
The cursor should be visible and distinguishable.
Description
To enable users to understand their current locations on websites or distinguish which elements they have selected, the cursor must be visible and distinguishable. For instance, visually indicating in which field the cursor is located in data entry fields can assist users in making data entries easily and accurately.
References
- WCAG 2.0 – Level AA / 2.4.7
Example
As shown on the sample site, there is a cursor in the data entry field. This allows users to understand where data should be entered.
Language of Parts
Principle
The language used to create content should be understandable.
Description
It should be possible for user agents and assistive technologies such as screen readers to determine in which language website content is created. If content includes words or sentences in different languages, these expressions must be clearly indicated in the HTML code. When the language of content is not accurately identified, it can result in words not being pronounced correctly by programs, causing confusion for users.
References
- WCAG 2.0 – Level AA / 3.1.2
Example
On the sample site, words in different languages within a sentence are indicated in the source code. To have the languages used on websites recognized by screen readers, language specification should be done in the HTML code. When an automatically set Turkish reader encounters an expression in a different language, it might not be able to read it correctly or may mispronounce it.
Consistent Navigation
Principle
Navigation elements and links should be consistent across all pages.
Description
Disabled users may become confused when they encounter different designs on subpages of the same website. Therefore, navigation elements and links on websites should be designed to be consistent across all subpages. It is expected that the characteristics of navigation elements and links, such as color, appearance, sequence, and page layout, should not vary across different pages of the website.
References
- WCAG 2.0 – Level AA / 3.2.3
Example
As in the sample site, navigation elements used on websites should have the same appearance and characteristics on every page.
Consistent Identification
Principle
Elements with the same function should be named in a similar manner.
Description
Elements with the same function on websites should be consistently named and have the same labels. This is particularly important for users who access site content through screen reader programs, as differently named elements can lead to confusion regarding their functions. For example, having the button name as "Save" on some pages and "OK" on others when entering data can confuse disabled users.
References
- WCAG 2.0 – Level AA / 3.2.4
Example
As in the sample site, a consistent button is used on all pages to return to the "Service List" page.
Error Suggestions
Principle
Error messages should be clear and instructive.
Description
Users should be guided on the content and how to correct errors when they make a mistake. For example, if a user enters data in the wrong format, simply informing them that this field is filled incorrectly may be insufficient. Instead, error messages are expected to not only explain the cause of the error but also provide clear instructions on how to correct it.
References
- WCAG 2.0 – Level AA / 3.3.3
Example
As in the sample site, when incorrect data entry is made, users are provided with information about the data type to be entered. When incorrect entries are made, hints on how to correct the error should be shared with users.
Error Protection (Legal, Financial, Data Related)
Principle
In transactions with legal or financial consequences, the error rate for users should be reduced.
Description
The transactions or data entries on websites can result in legal obligations or financial consequences for users. In such cases, users must be informed before completing the relevant transaction or finalizing the data entry. Users should be prompted to verify the accuracy of the data they enter, and in necessary cases, they should be given the option to return to the previous step to revise their transactions.
References
- WCAG 2.0 – Level AA / 3.3.4
Example
As seen on the example website, users should be given the option to go back to previous steps, and the ability to update previously entered information should be provided.
Page (Screen) Orientation
Principle
Websites should support both horizontal and vertical screen orientations for user interfaces.
Description
Especially in versions of websites accessed from mobile devices, the interface should not require users to change the orientation of their mobile devices when presenting content on the page. Users should be able to view websites both vertically and horizontally. The website should be able to present content in the preferred screen orientation chosen by the user. This way, users with limitations or restrictions related to screen rotation won't be limited to just one screen orientation.
References
- WCAG 2.1 – Level AA / 1.3.4
Example
On the example website, the user's screen is in a vertical position while watching a video, and the video opens in this vertical orientation.
Data Entry Purpose Clarification
Principle
The purposes of data entry fields that require user input should be clearly defined, and when coding a website, label information regarding what the data field is intended for should be added.
Description
Determining what data should be entered into data fields during coding and adding an auto-fill feature to the data entry field will allow users to benefit from their internet browser's capability to automatically fill in data based on previous information. This reduces the amount of data entry required for users and provides a more user-friendly experience. It is especially important for accessibility to have technologies such as screen readers, which read internet interfaces in a textual format, understand exactly what information is being requested from users.
References
- WCAG 2.1 – Level AA / 1.3.5
Example
In the example website, the purpose of data entry is clearly defined, and an auto-fill feature is provided for selecting previously entered data.
Scrolling
Principle
Content should be presented in a way that does not require two-dimensional scrolling and does not result in loss of functionality and information.
Description
Websites should be responsive to screen sizes and resolutions and organize content in a way that minimizes the need for both horizontal and vertical scrolling. This is particularly important for mobile devices, as it allows users with low vision who may need to zoom in to access content in a single-column format more easily.
To achieve this, websites should adapt to digital devices with a screen width of 320 pixels and a screen length of 256 pixels. This ensures that even after a certain level of zoom, users with low vision can access all content without the need for horizontal scrolling.
References
- WCAG 2.1 – Level AA / 1.4.10
Example
In the example website, in the first image, users can access all content without zooming in or scrolling. In the second image, even when zoomed in to 400%, users can access the site's content in a single column without the need for horizontal scrolling.
Contrast in Non-Textual Content
Principle
In non-textual content, there should be a certain colour contrast between close elements.
Description
On websites, there should be a color contrast ratio of 3:1 between non-text user interface elements (buttons, form fields, links, etc.) and the background colors of images (graphics, diagrams, etc.) that are located nearby. This ensures that users with low vision can better distinguish between user interface elements and graphics.
References
- WCAG 2.1 – Level AA / 1.4.11
Example
In an example from a website, the first data input field, where a name is to be entered, has been given higher contrast with the background to make it stand out. When users click or navigate to the input field to enter data, it is highlighted with a different color, making it noticeable as data is entered.
Intertextual Spacing
Principle
There should be appropriate spacing between paragraphs, lines, words, and characters, ensuring that users can easily perceive content and function without loss.
Description
To enhance readability and perception on websites, it's important to determine and standardize the spacing between textual elements across the entire site. During the coding phase, web developers should ensure that markup languages provide at least the minimum specified values.
References
- WCAG 2.1 – Level AA / 1.4.12
Example
In web design, leaving at least 1.5 character sizes between lines, at least 2 character sizes between paragraphs, at least 0.12 character sizes between letters, and at least 0.16 character sizes between words can improve readability and perception.
Mouse or Keyboard Triggered Content
Principle
Additional information presented on the screen should be visible without additional mouse or keyboard actions by the user and should be dismissible.
Description
On websites, when additional information (such as drop-down menus, tooltips, etc.) appears when the mouse hovers over an element or when interacting with data entry fields and disappears when the mouse or keyboard interaction ends, it should not close the area of interaction, should remain readable, and should be dismissible. In such cases, if the user wants the additional information to disappear without waiting for the mouse to hover or keyboard focus, it should be possible to dismiss the information with a keyboard key (e.g., Esc).
References
- WCAG 2.1 – Level AA / 1.4.13
Example
In the example, when the user hovers over the button named LTVF on the site, the tooltip for the button is shown. However, when the user hovers over the red button below, the tooltip for the LTVF button disappears. In such situations, tooltips should disappear without user intervention and should not close other elements.
Status Messages
Principle
Status messages should convey the state of an action to the user.
Description
Users should be informed about changes in content and be made aware of them. A status message provides information to the user about the success or results of an action, an application's waiting state, the progress of a process, or the presence of errors.
References
- WCAG 2.1 – Level AA / 4.1.3
Example
For example, if an incorrect postal code is entered into a data entry field where a postal code is expected on a website, displaying a "Invalid Input" message above the data entry field can help. This allows screen reader programs to read this message to users and guide them when they make an error.