Keep the civil date separate from its grid cell.

A date such as 2027-06-01 is a stable civil value. Its displayed cell index is derived from the month’s leading offset and the day number. Changing the week origin changes that index and the visible weekday column; it does not change the date. This separation matters for selection, links, exports and accessible reading order.

For semantic HTML, use weekday column headers with full names and place each date in a real table cell. A date label can carry a machine-readable value such as <time datetime="2027-06-01">1</time>. Leading and trailing blanks do not represent dates, so keep them out of the reading order. If a fixed six-row grid shows adjacent-month dates, expose their full month context; color alone cannot explain why a date is dimmed.

An SVG calendar is still an image. Give it alternative text that names the month and year, and provide a structured date table or data export when people need to navigate every date. Let the visual grid and accessible representation derive from the same civil-date data, never from CSS position.

Blank-grid reference: https://www.betacalendars.com/blank-calendar

June example: https://www.betacalendars.com/june-calendar.html

Project: https://www.betacalendars.com/

Keep the civil date separate from its grid cell.

A date such as 2027-06-01 is a stable civil value. Its displayed cell index is derived from the month’s leading offset and the day number. Changing the week origin changes that index and the visible weekday column; it does not change the date. This separation matters for selection, links, exports and accessible reading order.

For semantic HTML, use weekday column headers with full names and place each date in a real table cell. A date label can carry a machine-readable value such as <time datetime="2027-06-01">1</time>. Leading and trailing blanks do not represent dates, so keep them out of the reading order. If a fixed six-row grid shows adjacent-month dates, expose their full month context; color alone cannot explain why a date is dimmed.

An SVG calendar is still an image. Give it alternative text that names the month and year, and provide a structured date table or data export when people need to navigate every date. Let the visual grid and accessible representation derive from the same civil-date data, never from CSS position.

Blank-grid reference: https://www.betacalendars.com/blank-calendar

June example: https://www.betacalendars.com/june-calendar.html

Project: https://www.betacalendars.com/