Разработка доступных графиков

Сергей Кригер

Разработка доступных графиков

SinnerSchrader logo
sergeikriger.com
Есть вакансии

7 632 819 325

www.worldometers.info

Топ 10

МексикаРоссияБангладешНигерияПакистанБразилияИндонезияСШАИндияКитай129 163 276143 989 754164 669 751190 886 311197 015 955209 288 278263 991 379324 459 4631 339 180 1271 409 517 397
www.worldometers.info

Регионы

АзияАфрикаЕвропаЛатинская америкаСеверная америкаОкеания(4 545 133 094)(1 287 920 518)(742 648 010)(652 012 001)(363 844 490)(41 261 212)АзияАфрикаЕвропаЛатинская америкаСеверная америкаОкеания
217 млн
www.iapb.org    www.colourblindawareness.org    www.iapb.org

#1
Это возможно

План

Скрин ридеры

JAWS NVDA VoiceOver Other 46.6% 9.9% 11.7% 31.9%
www.webaim.org/projects/screenreadersurvey7/#primary
График с информацией сколько килограммов яблок было продано.30 июн01 июл02 июл03 июл04 июл012345продано яблок, кгпродано яблок, кг
График с информацией сколько килограммов яблок было продано.30 июн01 июл02 июл03 июл04 июл012345продано яблок, кгпродано яблок, кг

График с информацией сколько килограммов яблок было продано.

Минимум яблок продано: 2 кг30 июн01 июл02 июл03 июл04 июл012345продано яблок, кгминимумпродано яблок, кгминимум

Минимум яблок (2 кг) было продано 03 июля.

План по продаже 4 кг яблок был выполнен июля 1, июля 4.30 июн01 июл02 июл03 июл04 июл012345продано яблок, кгпродано яблок, кгплан продаж

План по продаже 4 кг яблок был выполнен 3 июля и 5 июля.

#2
Знать, о чем график

			const tmpl = "Минимум яблок ({{WEIGHT}} кг) было продано {{DATE}}."
			 
			<svg role="img" alt="Минимум яблок (2 кг) было продано 03 июля.">
				...
			</svg>
		
			const tmpl = "Минимум яблок ({{WEIGHT}} кг) было продано {{DATE}}."
			 
			<svg role="img" aria-label="Данные продаж" aria-describedby="chart-desc">
				<desc id="chart-desc">Минимум яблок (2 кг) было продано 03 июля.</desc>
				...
			</svg>
		

Советы

3 кг яблок, 3 кг бананов, 1 кг апельсинов было продано 01 июля с общей суммой продаж 19 руб. 4 кг яблок, 3 кг. бананов, 5 кг апельсинов было продано 02 июля с общей суммой продаж 38 руб. 2 кг яблок, 2 кг. бананов, 4 кг апельсинов было продано 03 июля с общей суммой продаж 26 руб. 3 кг яблок, 1 кг бананов, 5 кг. апельсинов было продано 04 июля с общей суммой продаж 31 руб. 5 кг яблок, 2 кг бананов, 1 кг апельсинов было продано 05 июля с общей суммой продаж 23 руб.

			<svg class="chart">
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 1 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 4 кг продано 2 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 3 июля"></rect>
			</svg>
		
			<svg class="chart">
				<g class="x axis" aria-hidden="true"></g>
				<g class="y axis" aria-hidden="true"></g>
			    ...
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 1 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 4 кг продано 2 июля"></rect>
				<rect tabindex="0" aria-label="Яблоки, 3 кг продано 3 июля"></rect>
			</svg>
		

Советы

#3
Доступные данные

			<body>
				<svg aria-hidden="true"></svg>
				<table class="visually-hidden"></table>
			</body>
		

visually hidden

			.visually-hidden {
			    position: absolute !important;
			    height: 1px;
			    width: 1px;
			    overflow: hidden;
			    clip: rect(1px, 1px, 1px, 1px);
			}
		
!== 0px
snook.ca
			<body>
				<div class="tabs">
					<div class="tab">
						<svg></svg>
					</div>
					<div class="tab">
						<table></table>
					</div>
				</div>
			</body>
		
Screenshot from ec.europa.eu
Screenshot from ec.europa.eu
Screenshot from ec.europa.eu
			<table>
			    <caption>Bob's data</caption>
				<tr>
				    <th scope="col">Дата</th>
				</tr>
				<tr>
				    <th scope="row">01 июля</th>
				</tr>
			</table>
		
inclusive-components.design/data-tables/
Петя's data'
DateAppleBananaOrange
Jun 30331
Jul 01435
Jul 02224
Jul 03315
Jul 04521
Маша's data'
DateAppleBananaOrange
Jun 30312
Jul 01154
Jul 02344
Jul 03251
Jul 04523
Продавец 1
Дата Яблоки Бананы Апельсины
01 июля 3 3 1
02 июля 4 3 5
03 июля 2 2 4
04 июля 3 1 5
05 июля 5 2 1
Продавец 2
Дата Яблоки Бананы Апельсины
01 июля 3 1 2
02 июля 1 5 4
03 июля 3 4 4
04 июля 2 5 1
05 июля 5 2 3
Общая сумма продаж
Дата Сумма
01 июля 38
02 июля 67
03 июля 59
04 июля 51
05 июля 54
Screenshot from webaim.org

Советы

ещё лучше?

Screenshot from worldbank.org

17 сек.

248

Советы

Резюме

Резюме

Скрин ридер

Доступность

Графики

Спасибо!..

sergeikriger.com bit.ly/holyjs-2018 Presentation QR code.

Credits

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Anton Saputro from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Llisole from www.thenounproject.com is licensed by CC 3.0 BY
Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Pixel perfect from www.flaticon.com is licensed by CC 3.0 BY