Тематичні дослідження №2 - Таблиця фактів харчування

Примітка: Таблиця в режимі "хассум"

У цьому тематичному дослідженні використовується таблиця з опцією "hassum".

Огляд

Перетворення таблиці "Факти харчування" у таблицю HTML неможливо зробити прямо вперед. Чому? просто взаємозв'язок між даними та заголовком не чітко визначений, і коли необхідність відповідати стандарту WCAG Level AA стає важчою.

Це тематичне дослідження вимагає від вас ознайомлення з документацією щодо концепції юзабіліті таблиці

Це тематичне дослідження стосується не того, як ви робите таблицю HTML WCAG Level AA сумісним, а надалі як застосувати концепцію юзабіліті таблиці.

Оригінальне джерело даних

Результат

На 2 чіпси (25 г)

Таблиця, що аналізує

Раніше.

Перш ніж розпочати аналіз таблиці, важливо зрозуміти всю інформацію, що міститься в таблиці.

Заголовок

Майже завжди там, підпис таблиці часто є першою наданою інформацією. Заголовок таблиці вважається коміркою заголовка групи на рівні 1.

Опис таблиці/Підсумок таблиці

Існує різниця між підсумком таблиці та підсумком групи. Підсумок таблиці - це опис таблиці. Підсумок групи часто представлений рядком із назвою "Всього" після групи даних.

Розділ заголовка рядкової групи

Таблиця може містити лише один заголовок групи рядків. Його місцезнаходження завжди перед будь-якою групою рядків даних. Заголовок групи рядків завжди містить стовпець заголовка таблиці з описом його комірок, якщо такі є. Якщо таблиця має два або більше заголовків групи рядків, виконайте об’єднання або розділення таблиці. Можливо, для таблиці немає заголовка групи рядків.

Стовпці, визначені в заголовку групи рядків, повинні мати гарне представлення структури кожної комірки у всіх наступних групах рядків.

Рядова група

Знайдіть усі дані та групу підсумкових рядків, які мають пряме відношення до підпису таблиці. Після кожної групи відокремлюється лінією

Визначте та застосуйте категорію до кожної групи рядків

Підсумована група рядків має менший розмір (кількість рядків), ніж група рядків даних. Групу підсумкових рядків потрібно прив’язати принаймні до однієї групи рядків даних. Іноді група зведених рядків має інший шаблон заголовка/комірки даних для рядка порівняно з рядком у групі рядків даних. Іноді групу підсумкових рядків об’єднують/об’єднують із коміркою заголовка групи.

Група рядків даних

Першу групу рядків ототожнюють з літерою А, а другу - з літерою В.

Група підсумкових рядків

Вкажіть і знайдіть рівень даних будь-якої групи підрядків

Це важливий крок, оскільки на рядок даних та послідовність груп рядків даних у таблиці впливатиме для ілюстрації рівня даних. Також наявність зведених даних всередині групи підрядків може змінити дизайн таблиці.

Рядова група "А"

Існує дві групи підрядків. перша група підрядків ідентифікується літерою AA, а друга - літерою AB. Обидва знаходяться на рівні 2.

Кожна група підрядків має підсумкову групу рядків.

Щодо іншого рядка в групі рядків A, його відношення належать до групи рядків A до рівня 1.

Рядова група "В"

Група рядків "B" на рівні 1 не містить жодної групи підрядків.

Аналіз типу комірки даних

Тут ми розглянемо, що таке тип комірки даних. Це допомогло б визначити та перевірити групу рядків заголовків.

Комірку даних можна ідентифікувати за допомогою однієї або декількох комірок заголовка. Осередок даних часто кваліфікується як одиниця виміру. Іноді комірку даних можна заховати в заголовку комірки або в іншій комірці даних.

Осередок даних, виміряний у "одиниця"
Осередок даних, виміряний у "г/мг"
Осередок даних, виміряний у "%"

Заповніть інформацію в таблиці

Заголовок стовпця

У нашому прикладі комірка даних, виміряна в одиницях, пов'язана із заголовком "Калорії", вважається підсумковою групою для всіх даних всередині таблиці

З ідентифікацією комірки даних ми маємо:

"Кількість": Заголовок стовпця для заголовка рядка вже надано. Для наочності та спрощення таблиці додано слово "з".
"Вага": Новий заголовок стовпця, виданий з другого типу комірки даних.
"Щоденне значення%": Заголовок стовпця вже відомий і представляє третій тип комірки даних

Заголовок групи рядків

У цьому прикладі ми знайшли дві групи рядків даних на рівні 1, і в обох відсутні комірки заголовка групи. Групу підсумкових рядків тут виключено, оскільки вона має спільну комірку заголовка групи. Під час пошуку за таблицею фактів харчування було виявлено таку назву для кожної групи рядків: "Мінерали та вітаміни" для групи рядків B та "Елементи поживних речовин" для групи рядків A.

Створіть таблицю HTML

Завдяки аналізу таблиці та інформації таблиці ми тепер можемо кодувати таблицю за допомогою HTML. Французький вміст було вилучено для ясності.

Підсумована група рядків завжди знаходиться після групи рядків даних. Порядок для рівня групи рядків даних повинен бути від найнижчого до найвищого рівня.

Деталі та підсумок HTML5 використовуються для додавання опису підпису таблиці. Він відкритий за замовчуванням

Тут порожня комірка не є коміркою макета, оскільки вони представляють відсутність даних.

Раніше

На 2 чіпси (25 г)

Швидкий перегляд рівня даних, представленого заголовком комірки

Та сама таблиця, але текст кожного заголовка комірки замінено рівнем даних