Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion fundamentals/a11y/ja/predictability/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@

## 実戦例:ログインフォームを作る

<img src="../images/login-form.png" style="max-width: 100%; width: 300px" alt="" />
<img src="../../images/login-form.png" style="max-width: 100%; width: 300px" alt="" />

実際によく使われるログインフォームのマークアップをしてみます。IDとパスワードの入力欄があり、送信できるログインボタンがあります。各入力欄には、値があるときだけ表示される削除ボタンがあります。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

たとえば下のような構成でボタン名がすべて「選択」だと、どの項目を選ぶボタンなのか分かりにくいため、**明確な文脈を合わせて提供する必要があります。**

![重複するボタンの例](../images/duplicate-interactive-element.png)
![重複するボタンの例](../../images/duplicate-interactive-element.png)

## 問題:意味を読み取れないスクリーンリーダー

Expand Down
2 changes: 1 addition & 1 deletion fundamentals/a11y/ja/structure/button-inside-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Buttonコンポーネントが`<a>`タグをレンダリングできるオプシ

UIの構成上、ボタンのように見えるカードの中に別のボタンを置く必要がある場合があります。このとき構造を誤るとアクセシビリティの問題が発生します。

![カードUIパターンの例](../images/button-inside-button.png)
![カードUIパターンの例](../../images/button-inside-button.png)

### 誤った例

Expand Down
2 changes: 1 addition & 1 deletion fundamentals/a11y/ja/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

次の画像は、ブラウザでリンクを右クリックしたときに表示されるコンテキストメニューです。リンク要素を正しく使えば、ユーザーが期待するこうした基本機能をすべて提供できます。

<img src="./images/browser-link.png" alt="" style="max-width: 100%; width: 300px" />
<img src="../images/browser-link.png" alt="" style="max-width: 100%; width: 300px" />

このようにアクセシビリティは、障害のあるユーザーだけでなく、キーボード利用者、そして一般的なWeb体験を期待するすべての人に不便を与えないための基本原則です。アクセシビリティを考慮しないと、誰にでも起こり得る不便が生じます。

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useNavigate } from "react-router-dom";
import { Avatar } from "@/components/shared/ui/Avatar";
import { MarkdownRenderer } from "@/components/shared/ui/MarkdownRenderer";
import { useWeeklyTopDiscussions } from "@/api/hooks/useDiscussions";
import { css } from "@styled-system/css";

Expand All @@ -17,17 +16,6 @@ function getWeekLabel(): string {
return `${month}월 ${weekOfMonth}째주 인기글`;
}

function truncateMarkdown(content: string, maxLength: number): string {
const plainText = content
.replace(/[#*`\[\]()]/g, " ")
.replace(/\s+/g, " ")
.trim();
if (plainText.length <= maxLength) {
return plainText;
}
return plainText.slice(0, maxLength) + "...";
}

function PopularPostItem({ post, rank }: { post: any; rank: number }) {
const navigate = useNavigate();

Expand Down
Loading