UNPKG

@ou-imdt/css

Version:

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

bitbucket.org/lts-imd/css

105 lines (52 loc) • 4.44 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
# NOTES > File contents are moved from README. 🐼 ## Reference documentation The following documentation is referenced when writing styles for native elements. To ensure optimal accessibility (WCAG) has been taken into consideration and that common keyboard controls (ARIA) can be documented alongside more obscure tag features (MDN). ### WCAG 2.1 Rule Highlight __Buttons__ 1.1.1 Non Text Alternative - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A) Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives. 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) 1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for some cases. (Level AA) 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA) 2.4.4 Link Purpose (In Context) - The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A) 2.4.9 Link Purpose (Link Only) - A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA) 2.4.1 Bypass Block - A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A) 1.1.4 Resize Text - Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) 1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA) 2.5.5. Target Size - The size of the target for pointer inputs is at least 44 by 44 CSS (some exceptions). __Inputs__ 1.1.1 Non Text Alternative - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A) Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives. 1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A) 2.4.6 Headings and Labels - Headings and labels describe topic or purpose. (Level AA) 3.3.2 Labels or Instructions - Labels or instructions are provided when content requires user input. (Level A) 4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A) ### WCAG 2.2 __Buttons__ 2.5.8 Target Size (Minimum) - Targets have an area of at least 24 by 24 CSS pixels. (Some exceptions)(Level AA) __Inputs__ __WCAG 2.1 (current) & 2.2 (upcoming)__ https://www.w3.org/TR/WCAG21 https://www.w3.org/TR/WCAG22 __ARIA Best Practices__ To determine best keyboard controls and if aria roles are required. https://www.w3.org/TR/wai-aria-practices-1.1/#button __MDN__ For tag api and syntax https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button ## Decisions __In most cases, style tag not roles:__ Roles are used when like-behaviour is needed but not styling. __Both wcag 2.1 and 2.2__ should be reviewed before making final choices. ## Research Aspects Investigate HSL for simplified color assignment Investigate Unit approach Investigate CSS4 colour contrast feature Investigate CSS4 relative colours for state (e.g. hover, active, focus) Investigate fonts Investigate icons for core+/utility ## Processing - autoprefix - purgecss - postcss - theme & dark/light mode