with disabilities at Higher Education institutions in Montenegro
WP 4 - DEV 4.4
Upgrade university websites for guidelines on studying with disability
I Introduction
Upgrade of HEIs websites in terms of accessibility is necessary in order to adapt them to students with disabilities. First step was creation of team which was introduced to needs of students with disability. Team members where educated and informed about European Union standards about topics and were introduced to experiences of other European and regional countries. Training of the team is essential in order to qualify members to recognize special requirements needed for students with disabilities and to recognize how much of that needs, if any, is already implemented in HEIs websites.
II Analyses of HEIs websites
In order to provide standard websites adapted to students with disabilities, analysis of the current situation was performed. All websites were analyzed by criteria proposed by European regulations about accessibility to students with disabilities.
The team has summarized its analysis in the attached table:
Table I. - websites requirements for the University Donja Gorica (UDG), and University Mediterranean (UNIM).
III Implementation
Analysis of the existing websites of the universities was done by using open source software. Also all websites of University Mediterranean and University Donja Gorica were adapted to fulfill all accessibility criteria defined in analyses of HEIs websites. All requirements that are implemented, or not required are listed in the table below. It is very important to note that there are requirements that are not suitable for universities' websites because of their content and their are noted as "Not Required".
Examples of the implemented items for the websites of the University Mediterranean are done in Appendix A.
Examples of the implemented items for the websites of the University Donja Gorica are done in Appendix AB.
Description of the requirements / Done/Not done/Not required/Font size 18pt (LMS site must have possibility to enlarge all text, including labels and captions on graphs, pictures, diagrams, maps, charts, equations, exponential numbers and letters, subscripts and superscripts, notes, and footnotes, in at least 18-point type, in order to meet the APH definition of large print) / Done
Site must use standard fonts with easily recognizable characters (Verdana, Arial, Helvetica APHont) / Done
Headings and subheadings (captions, titles of diagrams and charts) should be larger and bolder than other print and set in a font style that differs from that of the general text. Acceptable typefaces for this use include Arial Black, Helvetica Black Bold, Lucida Sans Bold, Era Bold ITC, Verdana Bold, Antique Olive Bold, and Helvetica Bold. / Done
Leading or spacing between lines should be at least 1¼ spaces to allow persons with low vision to effectively move from line to line in the text. / Done
Block style formatting and 2.5 cm margins are recommended. / Done
Format should include justification of left margins, and unjustified right margins (rag right) for ease in reading and transferring from line to line. Avoid the indentation of paragraphs. / Done
Avoid dividing words between lines. / Done
Columns of text, excluding graphic material, should be at least 39 characters in line length. Generally, for efficient reading, columns should be avoided. / Done
Grayscale and shading should be avoided, particularly when information needed for answering a test item is provided. / Done
The highest possible contrast should be used for text and background, with attention to the use of color. Certain color combinations other than black and white may be unreadable to persons with low vision or persons with color blindness. A good rule of thumb on use of colors is to use colors that are far apart on the color wheel and avoid using colors that have similar saturation (color depth). Blue and yellow, for example, provide a high degree of contrast when used together. Red and green should be avoided because they are the most troublesome colors for persons with color blindness. / Done
Unnecessary boxes and framing of material should be omitted unless the framing provides a separation of graphic material from text or encloses a group of scattered items. / Done
Graphics in large print must exhibit good contrast, clarity, and accurate details and information. / n/a
Pictures should be retained in the large print format. Editing for shaded material and clarity may be necessary. Some pictures that would need extensive editing and provide little or no cues for the large print reader may be considered for elimination. Purely decorative graphics should be deleted. / Done
Overlaid print on a diagram or graph should be avoided. While visually pleasing in some instances, this technique is difficult for persons with low vision to read. / Done
Multi-color graphs that use closely related colors may conceal vital information from the test taker who is unable to distinguish between the colors. Two to three contrasting colors or black and white are recommended. / Done
All graphs should contain short, descriptive headings or titles. / Done
Compass points, numbers, and vital information on graphs must be enlarged sufficiently for the low vision reader. / Done
Map symbols must be easily distinguishable and relevant. / Done
Map legends should appear near the top left hand corner of a map, if possible, and include a visually distinctive border. Use contrasting colors and distinguishable symbols rather than reproducing different sizes of the same symbol. / Done
If possible, map scales, should be positioned near the top left-hand corner of the map. / n/a
Labels should be arranged within the boundaries of the country or state borders whenever possible. / n/a
Symbols used should be reasonable and meaningful representations, e.g., a fish for fishing. / Done
Boundaries between countries should be bolder and thicker than boundaries between states or provinces on a map. / n/a
If a graph or table does not exceed one page in the original materials, then the large print version should be edited to fit on one page, if possible. Pertinent information and distracters must be maintained. / Done
CONTRASTING COLORS APPROPRIATE FOR PERSONS WITH COLOR PERCEPTION DIFFICULTIES
(in order of best contrast value)
Use black and white. / Done
Use dark blue and white. / Done
Use black and bright yellow. / Not required
Use dark blue and bright yellow. / Not required
Use dark brown and white. / Not required
Use pale blue and black. / Not required
Use yellow and purple. / Not required
Audio material should be easy to access. / Not required
Audio material should be easy to understand. / Not required
Audio material should be with inbult break points where listener can stop material listening. / Not required
Appendix A
Realization (Implementation) according to established plan for adoption of websites at UNIM
Accessibility options are also implemented at the University websites. Option for enlarging text is created. The pages are completely readable and functional when student enlarge text. Captions and titles are lager and bolder than other, general text. Also, options for zooming (zoom in/zoom out) are easy to use for students.
Fig.1. Web site possibility to enlarge all text, including labels and captions on graphs, pictures, diagrams, maps, charts, equations, exponential numbers and letters, subscripts and superscripts, notes, and footnotes, in at least 18-point type, in order to meet the APH definition of large print. (a) Website before adaptation, (b) Website after adaptation
New accessibility option on the web site is possibility to open pages using keyboard. Page-specified shortcut key do not conflict with existing browser and screen reader shortcuts. Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard. This improvement allows web users to immediately jump to a specific page in a website using shortcut keys on keyboard and allows them to define access keys for pages on web site. This component allows all of students to add, edit and delete access keys as they like. Also students have possibility to convert text into speech by pressing a button with loudspeaker as a label. This option is available for all kinds of text.
Fig.2. Web site accessibility options (a) Website before adaptation, (b) Website after adaptation
All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
Fig.3. Alternative text example.
All embedded multimedia is identified via accessible text that would allow user to briefly meet content.
Fig.4. Example of embedded multimedia.
Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately over all text in site.
Fig.5. Example of use of semantic markup.
Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.
Fig.6. Example of tabular data shown in form of table
Text labels are associated with form input elements. Related form elements are grouped with field set/legend.
Fig.7. Example of text labels associated with form input elements.
The reading and navigation order (determined by code order) is logical and intuitive.
Fig.8. Reading and listening of text is easy and intuitive for all data.
Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.
Fig.9. Example of link which is distinguished from other text not only by color.
For all text on site text and images of text have a contrast ratio of at least 4.5:1. There is always possibility to change contrast ratio.
Fig.10. Contrast ratio of text or text image.
All text in site is in fonts with easily recognizable characters (Verdana, Arial, Helvetica APHont)
Fig.11. Example of site fonts.
Headings and subheadings (captions, titles of diagrams and charts) are larger and bolder than other print and set in a font style that differs from that of the general text. Acceptable typefaces for this use include Arial Black, Helvetica Black Bold, Lucida Sans Bold, Era Bold ITC, Verdana Bold, Antique Olive Bold, and Helvetica Bold.
Fig.12. Example of heading.
Leading or spacing between lines should be at least 1¼ spaces to allow persons with low vision to effectively move from line to line in the text.
Fig.13. Example of spacing between lines.
The page is readable and functional when the text size is doubled.
Fig.14. Readability of double sized page.
Whole site have a specified foreground and background color. These can be applied to specific elements or to the page as a whole using CSS (and thus inherited by all other elements).
Fig.15. Example of foreground and background color.
Used symbols are reasonable and meaningful representations, e.g., a fish for fishing.
Fig.16. Example of used symbols.
Text is used within an image only for decoration (image does not convey content) OR when the information cannot be presented with text alone.
Fig.17. Text inside pictures is only used as a decoration.
All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing). Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts. Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.
Fig.18. Instructions for all keyboard shortcuts implemented in site.
The web page has a descriptive and informative page title.
Fig.19. Example of page title.
Fig.20. Accessibility options at the University site.